.page{
    width:100%;
    height:100vh;
    background-color:rgba(8, 21, 77, 1);
    background:url(./img/bg.png) no-repeat center;
    background-size:100% 100%;
}
.page-content{
    position:relative;
    margin-top:40px;
}
.page-left-box{
    position:relative;
}
.page-center-box{
    position:relative;
    .map-mark{
        cursor: pointer;
        width:0;
        position:absolute;
        transform: translateX(-50%) translateY(-100%);
    }
    /* @keyframes rotate{
        0%  {transform:translateY(-30) translateX(-30px) rotate(-20deg); opacity:0;}
        33.3%   {transform:translateY(-30px) translateX(-30px) rotate(-20deg); opacity:0;}
        34%   {transform:translateY(-30px) translateX(-30px) rotate(-20deg); opacity:1;}
        36%   {transform:translateY(0px) translateX(-30px) rotate(-10deg); opacity:1;}
        38%   {transform:translateY(-15px) translateX(-15px) rotate(0deg); opacity:1;}
        40%   {transform:translateY(0px) translateX(0px) rotate(0deg); opacity:1;}
        66%   {transform:translateY(0px) translateX(0px) rotate(0deg); opacity:1;}
        66.6%   {transform:translateY(0px) translateX(0px) rotate(20deg); opacity:0;}
        100% {transform:translateY(-30px) translateX(-30px) rotate(0deg); opacity:0;}
    } */
    @keyframes scala{
        0% {transform:translateX(-50%) scale(.94);}
        100% {transform:translateX(-50%) scale(1.04);}
    }
    .map-mark-title{
        color:#fff;
        min-width:100px;
        // height:40px;
        white-space: nowrap;
        // padding:0 20px;
        font-size:14px;
        // text-align:center;
        // line-height:70px;
        background:url(./img/ditibiaoqian.png) no-repeat center top;
        background-size:100% 100%;
        letter-spacing: 0px;
        overflow:hidden;
        position:absolute;
        left:50%;
        bottom:190px;
        transform: translateX(-50%);
        // animation: scala .6s linear infinite alternate;
    }
    @keyframes stretch{
        0% {height:20px; width:0;}
        25% {height:186px; width:10px;}
        75% {height:186px; width:10px;}
        100% {height:20px; width:0;}
    }
    .map-mark-icon-1{
        position:absolute;
        left:50%;
        bottom:0;
        transform: translateX(-50%);
        z-index:1;
        width: 0;
        height: 0;
        /* border-radius:6px 6px 0 0; */
        /* box-shadow: 0 -20px 20px 0 #19FEB044; */
        background-image: linear-gradient(0deg, rgba(28,235,254,1) 0%, rgba(28,235,254,0) 100%);
        animation: stretch 4s linear infinite;
    
    }
    @keyframes scala_1{
        0%   {box-shadow: 0 0 0 0 #1cebfe66, 0 0 0 10px #1cebfe66, 0 0 0 30px #1cebfe33;}
        100% {box-shadow: 0 0 0 10px #1cebfe66, 0 0 0 30px #1cebfe33, 0 0 0 30px #1cebfe00;}
    }
    .map-mark-icon-2{
        width:20px;
        height:20px;
        border-radius:50%;
        transform:translateX(-50%) translateY(50%) rotateX(-60deg) scale(1);
        position:absolute;
        left:50%;
        bottom:0;
        background-color:#1cebfe;  
        animation: scala_1 2s linear infinite;
    }
    .map-mark:hover .map-mark-title{
        // color:#ff0;
    }
    .map_mark_select{
        z-index:2;
    }
    .map_mark_select .map-mark-title{
        background-image:url(./img/xuanzhongditubiaoqian.png);
        // height:70px;
    }
    .map_mark_select .map-mark-icon{
        /* background-image: linear-gradient(0deg, #43d8e1 0%, #46c3f7 100%); */
    }

    .content-wrapper-a{
        display:grid;
        grid-template-rows: 0fr;
        transition: all .5s;
        .content-wrapper-b{
            overflow:hidden;
        }
    }
    .map-mark:hover {
        .content-wrapper-a{
            grid-template-rows: 1fr;
        }
    }
}